<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>个人中心</title>
		<link rel="stylesheet" type="text/css" href="../css/head_style.css"/>
		<link rel="stylesheet" type="text/css" href="../css/foot_style.css"/>
		<link rel="stylesheet" href="../js/layui-v2.2.6/layui/css/layui.css">
		<link rel="stylesheet" type="text/css" href="../css/fontCss.css"/>
		<link rel="stylesheet" type="text/css" href="../css/left_style.css"/>
		<link rel="stylesheet" type="text/css" href="../css/personalCenter.css"/>
		<script src="../js/layui-v2.2.6/layui/layui.js"></script>
	</head>
	<body>
		<!--头部-->
		<div class="head">
			<div class="head1 ">
				<img class="img" src="../img/top1.png" alt="汇网" width="50" height="50"/>
				<div class="head-search layui-form">
					<i class="layui-icon layui-icon-face-smile search-icon">&#xe615;</i> 
				 <div class="layui-input-inline head-search-input">
			        <select name="modules" lay-verify="required" lay-search="">
			          <option value="">寻找人才</option>
			          <option value="1">人才1号</option>
			        </select>
			     </div>
				</div>
				
				<div class="layui-btn layui-btn-sm fabu-btn">发&nbsp;&nbsp;布</div>
				<div class="btns">
					<span class="language-btns" >
						中文
						<i class="layui-icon layui-icon-face-smile language-icon">&#xe61a;</i>
					&nbsp;&nbsp;&nbsp;
						<div class="span-div">
							<p class="cn">中文</p>
							<hr/>
							<p class="eng">English</p>
						</div>
					</span>
					<span>&nbsp;&nbsp;&nbsp;</span>
					<div class="img-userhead">
						<img src="../img/1/10.png" width="32" height="32" style="border-radius: 16px;;"><!--头像-->
						<!--<span class="login-btn">登录</span>
						<span>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
						<span class="register-btn">注册</span>-->
						<span class="user-btn">Manty
							<i class="layui-icon layui-icon-face-smile user-icon" style="font-size: 14px;">&#xe61a;</i>
						</span>
						<div class="userbox">
							<div class="userbox-user">
								<img src="../img/1/10.png"/>
								<span class="userbox-usename">Manty</span>
								<span class="userbox-usertype">个人用户</span>
							</div>
							<div class="userbox-set">
								<i class="iconfont " style="font-size: 14px;color: #333333;">&#xe606;</i>
								&nbsp;&nbsp;&nbsp;设置
							</div>
							<div class="userbox-out">
								<i class="iconfont " style="font-size: 14px;color: #333333;">&#xe652;</i>
								&nbsp;&nbsp;&nbsp;安全退出
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--导航-->
		<div class="nav">
			<div class="nav1">
				<ul>
					<li>首&nbsp;&nbsp;&nbsp;&nbsp;页</li>
					<li>供需大厅</li>
					<li>产品说明</li>
					<li>关于我们</li>
					<li>帮助中心</li>
				</ul>
			</div>
		</div>
		<!--内容-->
		<div class="content">
			<div class="contentBox">
				<div class="left-nav">
					<div class="left-userhead">
						<img src="../img/1/10.png"/>
					</div>
					<div class="left-username">
						Manty
					</div>
					<!--发布需求-->
					<div class="left-demand left-btn-style" style="margin-top:20px ;">
						<i class="iconfont">&#xe75e;</i>
						<span class="">发布需求</span>
					</div>
					<!--发布历史-->
					<div class="left-history left-btn-style">
						<i class="iconfont">&#xe75f;</i>
						<span class="">发布历史</span>
					</div>
					<!--交易记录-->
					<div class="left-record left-btn-style">
						<i class="iconfont">&#xe762;</i>
						<span class="">交易记录</span>
					</div>
					<!--我的资料-->
					<div class="left-data left-btn-style">
						<i class="iconfont">&#xe760;</i>
						<span class="">我的资料</span>
					</div>
					<!--修改密码-->
					<div class="left-password left-btn-style">
						<i class="iconfont">&#xe762;</i>
						<span class="">修改密码</span>
					</div>
					<!--签到-->
					<div class="left-sign">
						<span class="left-sign-span">已连续签到2天</span>
						<div class="left-sign-btn">签到</div>
					</div>
				</div>
				<div class="contentBox-body">
					<div class="contentBox-head">
						<div class="contentBox-head-view">
							<div class="contentBox-head-view-i">
								<i class="iconfont">&#xe643;</i>
							</div>
							<span class="contentBox-head-view-span1">查看次数</span>
							<span class="contentBox-head-view-num">
								<span id="">
									1
								</span>
								<span class="contentBox-head-view-span2">次
									<span class="contentBox-head-view-btn">
										购买
									</span>
								</span>
							</span>
						</div>
						
						<div class="contentBox-head-translation">
							<div class="contentBox-head-translation-i">
								<i class="iconfont">&#xe69c;</i>
							</div>
							<a href="" title="查看说明"><i class="iconfont a-i">&#xe758;</i></a>
							<span class="contentBox-head-translation-span1">免费翻译200字内</span>
							<span class="contentBox-head-translation-num">
								<span id="">
									1
								</span>
								<span class="contentBox-head-translation-span2">次</span>
							</span>
						</div>
					</div>
				
					<div class="contentBox-trading">
						<div class="contentBox-trading-title">
							<span class="contentBox-trading-title-span">交易记录</span>
						</div>
						<div class="contentBox-trading-table">
							<table >
							<tr class="table-trth-style">
								<th>交易时间</th>
								<th>交易金额</th>
								<th>交易类型</th>
								<th>交易内容</th>
							</tr>
							
							<!--<tr class="table-trtd-style">
								<td>
									<p>22:35:56</p>
									<p>2018-05-16</p>
								</td>
								<td>￥ 50.00</td>
								<td>购买</td>
								<td>查看10次联系方式</td>
							</tr>-->
							
							<!--没数据时显示这个-->
							 <tr class="err-tr">
						           <th colspan="4"><img src="../img/err.png" width="250"/></th>
						          
						     </tr>
						</table>
						
						</div>
						<div class="contentBox-trading-btn">
							<div class="page" id="page">
								
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="foot">
			<div class="foot1">
				Copyright © 2018 世界汇网  www.thewiorldwie.cn
			</div>
		</div>
	</body>
	<script>
	layui.use(['form', 'layedit', 'laydate','laypage'], function(){
	  var form = layui.form  
	  ,layer = layui.layer		
	  ,layedit = layui.layedit	
	  ,laydate = layui.laydate
	  ,laypage = layui.laypage
	  ,$ = layui.jquery;
		
		 $(".language-btns").click(function(){
                if(!$(".span-div").is(':hidden')){//如果当前不隐藏
                    $('.span-div').hide();//就隐藏div
                    $(".language-icon").html("&#xe61a;")
                }else{//否则
					$('.userbox').hide();//就隐藏div
					$(".user-icon").html("&#xe61a;")
                    $('.span-div').show();//那么就显示div
                    $(".language-icon").html("&#xe619;")
                }
            })

            $(".user-btn").click(function(){
                if(!$(".userbox").is(':hidden')){//如果当前不隐藏
                    $('.userbox').hide();//就隐藏div
                    $(".user-icon").html("&#xe61a;")
                }else{//否则
 					$('.span-div').hide();//就隐藏div
 					$(".language-icon").html("&#xe61a;")
                    $('.userbox').show();//那么就显示div
                    $(".user-icon").html("&#xe619;")
                }
            });
		
		//分页模块
		laypage.render({
		  elem: 'page' //注意，这里的 page 是 ID，不用加 # 号
		  ,count: 70 //数据总数，从服务端得到
		  ,jump: function(obj, first){
		    //obj包含了当前分页的所有参数，比如：
		    console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
		    console.log(obj.limit); //得到每页显示的条数
		    
		    //首次不执行
		    if(!first){
		      //do something
		    }
		  }
		});
		
		//加载更多按钮
		$(".ctbtn").click(function(){
                $(".contentBox-trading-table table").append('<tr class="table-trtd-style"><td><p>22:35:56</p><p>2018-05-16</p></td><td>￥ 50.00</td><td>购买</td><td>查看10次联系方式</td></tr>')
            });
		
})
  	</script>
</html>
